<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能体开发平台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="za.css">
    <!-- 使用 layui 自带图标 -->
</head>
<body>
    <div class="za-layout">
        <!-- 顶部导航栏 -->
        <header class="za-header">
            <div class="za-logo">
                <i class="layui-icon layui-icon-bot" style="margin-right: 10px;"></i>
                <span>AI智能体开发平台</span>
            </div>
            <div class="za-user-info" id="userInfo">
                <span class="za-avatar">游</span>
                <span class="za-nickname">游客</span>
                <a href="login.html" class="za-btn za-btn-primary">登录</a>
            </div>
        </header>
        
        <!-- 主体内容区域 -->
        <div class="za-main">
            <!-- 左侧菜单栏 -->
            <aside class="za-sidebar" id="sidebar">
                <nav class="za-menu">
                    <div class="za-menu-item active" data-url="agent-list.html">
                        <i class="layui-icon layui-icon-cols za-menu-icon"></i>
                        <span class="za-menu-text">智能体列表</span>
                    </div>
                    <div class="za-menu-item" data-url="agent-create.html">
                        <i class="layui-icon layui-icon-addition za-menu-icon"></i>
                        <span class="za-menu-text">创建智能体</span>
                    </div>
                    <div class="za-menu-item" data-url="knowledge-manage.html">
                        <i class="layui-icon layui-icon-note za-menu-icon"></i>
                        <span class="za-menu-text">知识库管理</span>
                    </div>
                    <div class="za-menu-item" data-url="knowledge-manage.html">
                        <i class="layui-icon layui-icon-note za-menu-icon"></i>
                        <span class="za-menu-text">知识库管理</span>
                    </div>
                    <div class="za-menu-item" data-url="user-manage.html">
                        <i class="layui-icon layui-icon-username za-menu-icon"></i>
                        <span class="za-menu-text">用户管理</span>
                    </div>
                    <div class="za-menu-item" data-url="system-config.html">
                        <i class="layui-icon layui-icon-theme za-menu-icon"></i>
                        <span class="za-menu-text">系统配置</span>
                    </div>
                </nav>
            </aside>
            
            <!-- 主内容区域 -->
            <main class="za-content">
                <div class="za-iframe-container">
                    <iframe id="mainFrame" src="agent-list.html" frameborder="0" width="100%" height="100%"></iframe>
                </div>
            </main>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        // 初始化页面
        layui.use(['jquery'], function() {
            var $ = layui.jquery;
            
            // 菜单点击事件
            $('.za-menu-item').on('click', function() {
                // 移除所有菜单项的激活状态
                $('.za-menu-item').removeClass('active');
                // 添加当前菜单项的激活状态
                $(this).addClass('active');
                
                // 获取目标URL
                var url = $(this).data('url');
                // 更新iframe内容
                $('#mainFrame').attr('src', url);
            });
            
            // 模拟用户登录状态检查
            function checkLoginStatus() {
                // 实际项目中应该从服务器获取登录状态
                // 这里只是模拟，默认显示登录状态
                var isLogin = false;
                var userInfo = {
                    nickname: '张三',
                    avatar: '张'
                };
                
                if (isLogin && userInfo) {
                    $('#userInfo .za-avatar').text(userInfo.avatar);
                    $('#userInfo .za-nickname').text(userInfo.nickname);
                    $('#userInfo .za-logout-btn').text('登出').attr('href', 'javascript:void(0)');
                    
                    // 登出事件
                    $('#userInfo .za-logout-btn').on('click', function() {
                        // 实际项目中应该调用登出API
                        alert('已登出');
                        location.reload();
                    });
                }
            }
            
            // 响应式菜单切换
            function initResponsiveMenu() {
                // 在小屏幕上添加菜单切换功能
                if ($(window).width() <= 768) {
                    $('.za-sidebar').addClass('collapsed');
                    
                    // 点击遮罩层关闭菜单
                    var mask = $('<div class="menu-mask"></div>');
                    mask.css({
                        position: 'fixed',
                        top: 60,
                        left: 0,
                        width: '100%',
                        height: 'calc(100vh - 60px)',
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        zIndex: 999,
                        display: 'none'
                    });
                    mask.appendTo('body');
                    
                    // 点击头像显示菜单
                    $('.za-avatar').on('click', function() {
                        $('.za-sidebar').toggleClass('collapsed').toggleClass('open');
                        mask.toggle();
                    });
                    
                    // 点击遮罩层关闭菜单
                    mask.on('click', function() {
                        $('.za-sidebar').addClass('collapsed').removeClass('open');
                        mask.hide();
                    });
                }
            }
            
            // 窗口大小变化时重新初始化响应式菜单
            $(window).on('resize', function() {
                initResponsiveMenu();
            });
            
            // 初始化
            checkLoginStatus();
            initResponsiveMenu();
            
            // 消息提示函数
            window.showMessage = function(type, message, duration = 3000) {
                var messageClass = 'za-message';
                switch(type) {
                    case 'success':
                        messageClass += ' za-message-success';
                        break;
                    case 'error':
                        messageClass += ' za-message-error';
                        break;
                    case 'warning':
                        messageClass += ' za-message-warning';
                        break;
                    case 'info':
                    default:
                        messageClass += ' za-message-info';
                        break;
                }
                
                var messageDom = $('<div class="' + messageClass + '">' + message + '</div>');
                messageDom.appendTo('body');
                
                setTimeout(function() {
                    messageDom.remove();
                }, duration);
            };
        });
    </script>
</body>
</html>